<template>
  <div class="container">
    <div class="header">
      <button @click="getSelectedRows">获取选中行</button>
    </div>
    <div class="body">
      <ag-grid-vue v-bind="gridOptions" @grid-ready="onGridReady">
      </ag-grid-vue>
    </div>
    <div class="footer">底部内容</div>
  </div>
</template>

<script>
// 引入 Ag-Grid Vue 组件
import { AgGridVue } from "ag-grid-vue";

export default {
  name: "App",
  components: {
    AgGridVue,
  },
  data() {
    return {
      gridOptions: {
        style: { width: "100%", height: "100%" },
        class: "ag-theme-alpine", // 设置主题样式
        rowSelection: "multiple", // 开启多选 'single'，'multiple'
        suppressRowClickSelection: true, // 禁用行点击选择
        suppressMovableColumns: true, // 禁用列移动
        defaultColDef: {
          // 默认列定义，所有列都继承这些配置
          resizable: true,
          cellStyle: {
            // 设置单元格边框
            // border: "1px solid"
          },
        },
        columnDefs: [
          {
            headerName: "",
            headerClass: 'test-parent',
            children: [
              {
                checkboxSelection: true, // 开启复选框
                headerCheckboxSelection: true, // 开启表头复选框
                width: 50,
                headerClass: 'test-children',
              },
              { headerName: "姓名", field: "name", headerClass: 'test-children' },
              { headerName: "性别", field: "sex", headerClass: 'test-children' },
              { headerName: "年龄", field: "age", headerClass: 'test-children' },
            ]
          },
          {
            headerName: "工作信息",
            children: [
              { headerName: "职位", field: "position" },
              { headerName: "薪资", field: "salary" },
            ],
          },
        ],
        rowData: [
          { name: "张三", sex: "男", age: 18, position: "前端", salary: 15000 },
          { name: "李四", sex: "男", age: 20, position: "后端", salary: 18000 },
          { name: "王五", sex: "女", age: 19, position: "设计", salary: 16000 },
        ],
      },
      gridApi: null, // 网格 API
      columnApi: null, // 列 API
    };
  },
  methods: {
    /**
     * 网格准备就绪事件
     * @param params
     */
    onGridReady(params) {
      console.log("网格准备就绪", params);
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      this.gridApi.sizeColumnsToFit(); // 列宽自适应
      this.setTotalRow(); // 设置合计行
    },
    // 获取选中行数据
    getSelectedRows() {
      const selectedNodes = this.gridApi.getSelectedNodes();
      const selectedData = selectedNodes.map((node) => node.data);
      const selectedDataStringPresentation = selectedData
        .map((node) => node.name + " " + node.sex + " " + node.age)
        .join(", ");
      alert(`选中行: ${selectedDataStringPresentation}`);
    },
    // 设置合计行
    setTotalRow() {
      const row = {
        name: "合计",
        age: this.gridOptions.rowData.reduce((sum, item) => sum + item.age, 0),
      };
      this.gridApi.setPinnedTopRowData([row]); // //在顶部显示合计行
      this.gridApi.setPinnedBottomRowData([row]); // 在底部显示合计行
    },
  },
};
</script>

<style>
/* 表格主体单元格边框 */
.ag-theme-alpine .ag-ltr .ag-cell {
  border-right-color: inherit;
}

/* 表格头部单元格边框 */
.ag-header-cell+.ag-header-cell {
  border-left: 1px solid #ccc;
}

.ag-header-group-cell-no-group {
  display: none;
}

.test-parent {
  display: none;
}

.ag-header-row,
.ag-header-row-column {
  overflow: initial;
}

.test-children {
  height: 200%;
  top: -100%;
}
</style>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;

  .header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  .body {
    width: 100%;
    flex: 1;
    margin-bottom: 10px;
  }

  .footer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
  }
}
</style>
